<template>
	<view class="drop-list">
		<!-- 列表渲染单选 -->
		<block v-if="type=='list'">
			<scroll-view class="menu-box" style="height: 100%;" :scroll-y="true">
				<view class="box" v-for="pItem in newItem[childName]" :key="pItem.drop_item_key">
					<view class="title" :class="{active:isActive(pItem)}" @tap="selectItemList(pItem,pItem.drop_item_key)">{{pItem[fileds]}}</view>
				</view>
			</scroll-view>

		</block>
	</view>
</template>

<script>
	import {
		guid
	} from '../../lib/guid.js'
	export default {
		/**
		 * @property {Object}						item			当前项
		 * @property {String}						fileds  		显示的字段（默认 name）
		 * @property {String}						childName  		子菜单字段（默认 submenu）
		 * @property {String}						type  			类型	（默认 list，可选项无）
		 * */

		props: {
			item: {
				type: Object,
				default () {
					return {}
				}
			},
			fileds: {
				type: String,
				default: "name"
			},
			childName: {
				type: String,
				default: 'submenu'
			},
			type: {
				type: String,
				default: 'list'
			},
		},
		created() {
			this.init()
		},
		data() {
			return {
				newItem: [],
				//列表选中:
				current: -1,
				selectArr: [],
			}
		},
		computed:{
			
		},
		methods: {
			init() {
				// this.$nextTick(() => {
				// 	console.log(this.$data);
				// 	console.log(this.$props);
				// })
				this.newItem = JSON.parse(JSON.stringify(this.item))
				this.newItem.drop_item_key = guid()
				this.setKey(this.newItem)
			},
			setKey(item, pKey = '') {
				let child = item[this.childName]
				if (child && child.length) {
					child.forEach(el => {
						el.drop_item_key = guid()
						el.checked = el.checked ? el.checked : false
						el.parent_type = this.type
						if (el.checked) {
							if (el.parent_type === 'list') {
								this.selectItemList(el, pKey)
							}
						}
						this.setKey(el, el.drop_item_key)
					})
				} else {
					item[this.childName] = []
					this.deepIndex = -1
				}
			},
			selectItemList(data,key) {
				console.log('选择data', data,key);
				this.isExist(data)
			},
			isExist(item) {
				// console.log('this.selectArr', this.selectArr);
				const current = this.selectArr
				if (this.type === 'listArr') {
					if (current.length) {
						if (JSON.stringify(current).includes(JSON.stringify(item)) === false) {
							// console.log('不存在')
							item.checked = true
							this.selectArr.push(item)
							
						} else {
							for (let i = 0; i < current.length; i++) {
								if (current[i].drop_item_key === item.drop_item_key) {
									item.checked = false
									this.selectArr.slice(i, 1);
								}

							}
							// console.log('已存在')

						}
					} else {
						item.checked = true
						this.selectArr.push(item)
						
					}
				} else if(this.type=== 'list') {
					this.selectArr = []
					if(JSON.stringify(current).includes(JSON.stringify(item)) === false){
						item.checked = true
						this.selectArr.push(item)
					}
					
				}
				console.log('listitem',item);
				const show = (!item[this.childName] || !item[this.childName].length) ? true : false
				this.$emit("close", show)
				this.$emit('change', this.selectArr)
			},
			isActive(item){
				// return JSON.stringify(this.selectArr).includes(JSON.stringify(item))
				// console.log('selectArr',JSON.stringify(this.selectArr));
				// console.log('item',JSON.stringify(item));
				// console.log(JSON.stringify(this.selectArr).includes(JSON.stringify(item)));
				if (JSON.stringify(this.selectArr).includes(JSON.stringify(item)) === false) {
					return false
				}else{
					return true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	view {
		display: flex;
		flex-wrap: nowrap;
	}

	.drop-list {
		width: 100%;
		align-items: center;
		flex-direction: column;

		.title {
			width: 100%;
			font-size: 26rpx;
			color: #888;
			&.active{
				color: #FF7947;
			}
		}

		.labels {
			flex-direction: row;
			flex-wrap: wrap;

			.on {
				border-color: $uni-color-primary;
				background-color: $uni-color-primary;
				color: #fff;
			}

			>view {
				width: calc((698rpx - 30rpx * 3) / 4 - 1rpx * 2);
				height: 60rpx;
				border: solid 1px #adadad;
				border-radius: 4rpx;
				margin-right: 20rpx;
				margin-top: 16rpx;
				font-size: 24rpx;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}
		}

		.menu-box {
			width: 698rpx;
			height: calc(690rpx - 120rpx);
			flex-shrink: 1;

			.box {
				width: 100%;
				padding-top: 32rpx;
				flex-direction: column;
			}
		}
	}
</style>